import * as React from "react";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Divider from "@mui/material/Divider";
import { getBlogListByCategory } from "./Api";
import { useEffect, useState } from "react";
import {useParams,  useNavigate
} from 'react-router-dom'
import { Link } from "@mui/material";
import PaginationLayout from "./PaginationLayout"
import BlogItem from "./BlogItem";
import { SpaceBar } from "@mui/icons-material";

interface MainProps {
  id: string;
}


export default function BlogList() {
  const navigate = useNavigate();

  console.log("BlogList")
  const [blogList, setBlogList] = useState<
    { title: string; desc: string; id: string }[]
  >([]);
  const [page, setPage] = useState<number>(0);
  const [size, setsize] = useState<number>(10);
  const params = useParams()
  const id = params.id as string

  useEffect(() => {
    setBlogList(getBlogListByCategory(id, page, size));
    console.log("getBlogListByCategory")
  }, [id, page, size]);
  const changeCount = (value:number)=>{
      console.log(`changeCount:${value}`)
  }

  return (
    <Grid
      item
      xs={12}
      md={8}
      sx={{
        "& .markdown": {
          py: 3,
        },
      }}
    >
      {blogList.map((blog) => (
        <>
          {/* <Link key="${blog.title}" variant="h6" gutterBottom    onClick={() => {
              console.log("click "+{blog})
              navigate(`/BlogDetail/${blog.id}`);
            }}>
            {blog.title}
          </Link>
          <Typography variant="h6" gutterBottom>
            {blog.desc}
          </Typography>
          <Divider /> */}
          <BlogItem title={blog.title} desc={blog.desc} date="2020-10-10 12:12:12" id={blog.id} />
          
        </>
      ))}

      <PaginationLayout count={size} onselect={changeCount}/>

      {/* <Typography variant="h6" gutterBottom>
        {title}
      </Typography>
      <Divider />
      {posts.map((post) => (
        <Markdown className="markdown" key={post.substring(0, 40)}>
          {post}
        </Markdown>
      ))} */}
    </Grid>
  );
}
